<template>
  <div class="divBox">
    <div>
      <h2>直播间控制台</h2>
    </div>
    <el-card class="box-card" shadow="never">
      <div class="page_liver_control">
        <el-image :src="zhiboInfo.cover" class="page_liver_image"></el-image>
        <div class="control_info_body_body">
          <div class="control_info_title">
            <div class="zhibo-name">{{ zhiboInfo.name }}</div>
          </div>
          <div class="control_info_main_data_container">
            <div class="control_info_list">
              <div
                v-if="zhiboInfo.status == '准备中'"
                class="control_info_list_item"
              >
                开播时间：{{ zhiboInfo.scheduleTime }} -
                {{ zhiboInfo.expireTime }}
              </div>
              <div v-else class="control_info_list_item">
                开播时间：{{ zhiboInfo.startTime }} - {{ zhiboInfo.endTime }}
              </div>
              <div class="control_info_list_item">
                房间号：{{ zhiboInfo.id }}
              </div>
              <div class="control_info_list_item">
                主播：{{ userInfo.anchors[0].name }}
              </div>
              <div v-if="userInfo.ruleList && userInfo.ruleList.length > 0" class="zhibo-guize">已开启邀请奖励 <span
                @click="lookguize()"
              >查看规则</span></div>
            </div>
            <div class="control_info_main_data">
              <div class="control_info_main_data_item">
                <p class="control_info_main_data_item_text">在线人数</p>
                <p class="control_info_main_data_item_data">
                  {{ online || '-' }}
                </p>
              </div>
              <div class="control_info_main_data_item">
                <p class="control_info_main_data_item_text">观看人次</p>
                <p class="control_info_main_data_item_data">
                  {{ userInfo.views }}
                </p>
              </div>
              <div class="control_info_main_data_item">
                <p class="control_info_main_data_item_text">赞</p>
                <p class="control_info_main_data_item_data">
                  {{ userInfo.likes }}
                </p>
              </div>
              <div class="control_info_main_data_item">
                <p class="control_info_main_data_item_text">评论</p>
                <p class="control_info_main_data_item_data">
                  {{ userInfo.messageNumber }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="control_oper">
        {{ zhiboInfo.status }}
      </div>
    </el-card>
    <div class="zhibo-tab-pane">
      <el-tabs v-model="activeshang" @tab-click="shangleClick">
        <el-tab-pane
          v-for="(item, index) in sahngjialist"
          :key="index"
          :label="item.name"
          :name="item.value"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <shopping
      v-if="activeshang === '1'" :liveId="zhiboInfo.id+''" @getaddshopp="getaddshopp"
      @getdeleteshopp="getdeleteshopp"
    ></shopping>
    <luck
      v-else-if="activeshang === '2'" :liveId="zhiboInfo.id+''" @luckDrawEnd="luckDrawEnd"
      @luckDrawStart="luckDrawStart"
    ></luck>
    <invitation
      v-else-if="activeshang === '3'" :liveId="zhiboInfo.id+''"
    ></invitation>
    <playback
      v-else-if="activeshang === '4'" :liveId="zhiboInfo.id+''"
    ></playback>
    <messagelist v-else :liveId="zhiboInfo.id+''"></messagelist>
    <el-dialog
      :before-close="()=>{guizevisible = false}"
      :visible.sync="guizevisible"
      title="奖励规则"
      width="50%"
    >
      <div class="guize-box">
        <div v-for="(item, key) in userInfo.ruleList" :key="key">
          <div class="guize-list">
            <div class="guize-title">邀请人数：</div>
            <div class="guize-info">{{ item.startNumber }} 到 {{ item.endNumber }} 人</div>
          </div>
          <div class="guize-list">
            <div class="guize-title">奖品：</div>
            <div class="guize-info">
              <el-table
                :data="item.rewardList"
                border style="width: 100%"
              >
                <el-table-column
                  align="center"
                  label="商品ID"
                  prop="skuId" width="80"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="商品图"
                  prop="name" width="80"
                >
                  <template slot-scope="scope">
                    <div class="demo-image__preview">
                      <el-image
                        :preview-src-list="[scope.row.cover]"
                        :src="scope.row.cover"
                        style="width: 36px; height: 36px"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="名称" prop="title"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="数量"
                  prop="quantity" width="120"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  label="单价"
                  prop="price" width="120"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button @click="guizevisible = false">取 消</el-button>
        <el-button type="primary" @click="guizevisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getmeizhiInfo } from '@/api/marketing'
import shopping from './shopping.vue'
import luck from './luck.vue'
import invitation from './invitation.vue'
import playback from './playback'
import ArRTM from './ArRTM@latest.js'
import messagelist from './messagelist'

export default {
  components: {
    shopping,
    luck,
    invitation,
    playback,
    messagelist
  },
  data() {
    return {
      zhiboInfo: null,
      userInfo: {},
      activeshang: '1',
      sahngjialist: [
        { name: '商品', value: '1' },
        { name: '抽奖', value: '2' },
        { name: '统计', value: '3' },
        { name: '回放', value: '4' },
        { name: '评论', value: '5' }
      ],
      vipInfo: {},
      online: 0,
      guizevisible: false
    }
  },
  created() {
    this.zhiboInfo = JSON.parse(this.$route.query.Info)
    console.log(this.zhiboInfo)
    this.dataInfo()
    // this.vipInfo=JSON.parse(sessionStorage.getItem('userInfo'))
    this.vipInfo = JSON.parse(sessionStorage.getItem('userInfo'))
  },
  methods: {
    // 查看邀请奖励规则
    lookguize() {
      this.guizevisible = true
    },
    dataInfo() {
      getmeizhiInfo(this.zhiboInfo.id).then((res) => {
        console.log('zhibo', res)
        this.userInfo = res
        this.getInfo()
      })
    },
    shangleClick() {
    },
    //抽奖开始
    luckDrawStart() {
      let that = this
      let code = {
        type: 'LotteryStart'
      }
      that.channel.sendMessage({
          text: JSON.stringify(code)
        }, // 发送文本消息
        {
          enableHistoricalMessaging: false // 是否保存为历史消息
        }
      ).then(() => {
        console.log('开始抽奖')
        // 频道消息发送成功
      }).catch(error => {
        // 频道消息发送失败
      })
    },
    //抽奖结束
    luckDrawEnd() {
      let that = this
      let code = {
        type: 'LotteryDraw'
      }
      that.channel.sendMessage({
          text: JSON.stringify(code)
        }, // 发送文本消息
        {
          enableHistoricalMessaging: false // 是否保存为历史消息
        }
      ).then(() => {
        console.log('开始抽奖')
        // 频道消息发送成功
      }).catch(error => {
        // 频道消息发送失败
      })
    },
    getInfo() {
      let that = this
      that.client = ArRTM.createInstance('29ca500a6da9520b54e7c23c80f0177c')
      const options = {
        uid: this.vipInfo.storeId + '-' + this.vipInfo.id
      }
      //登录
      that.client.login(options).then(() => {
        that.channel = that.client.createChannel(that.userInfo.id + '')
        that.channel.join().then(() => {
          console.log('加入群成功')
          that.channel.on('MemberCountUpdated', (count) => { // 监听频道消息
            console.log('online', count)
            this.online = count - 1
          })
        }).catch(error => {
        })
      })
    },
    //上架商品
    getaddshopp(row) {
      console.log('row852', row)
      let that = this
      let code = {
        type: 'ProductOnshelf',
        shoppingId: row.id
      }
      that.channel.sendMessage({
          text: JSON.stringify(code)
        }, // 发送文本消息
        {
          enableHistoricalMessaging: false // 是否保存为历史消息
        }
      ).then(() => {
        console.log('商品上架成功')
        // 频道消息发送成功
      }).catch(error => {
        // 频道消息发送失败
      })
    },
    // 发送消息下架商品
    getdeleteshopp() {
      console.log('11')
      let that = this
      let code = {
        type: 'ProductOffshelf'
      }
      that.channel.sendMessage({
          text: JSON.stringify(code)
        }, // 发送文本消息
        {
          enableHistoricalMessaging: false // 是否保存为历史消息
        }
      ).then(() => {
        console.log('商品下架成功')
        // 频道消息发送成功
      }).catch(error => {
        // 频道消息发送失败
      })
    }
  }
}
</script>
<style lang="scss" scoped>
h2 {
  opacity: 0.9;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #000000;
  letter-spacing: 0;
  margin-bottom: 45px;
  margin-top: 10px;
}

.box-card {
  border-radius: 10px;
  overflow: initial;

  .page_liver_control {
    padding: 10px 20px 40px 20px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .page_liver_image {
      display: block;
      float: left;
      width: 250px;
      height: 200px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: -50px;
      border-radius: 12px;
    }

    .control_info_body_body {
      vertical-align: top;
      margin-left: 282px;
      font-family: PingFangSC-Regular;
      font-size: 16px;

      .control_info_title {
        opacity: 0.9;
        font-family: PingFangSC-Medium;
        display: flex;
        flex-wrap: wrap;

        .zhibo-name {
          font-size: 24px;
          color: #000000;
        }
      }

      .zhibo-guize {
        margin-top: 9px;
        color: #555;

        span {
          cursor: pointer;
          color: #0C8AFF;
        }
      }

      .control_info_main_data_container {
        display: flex;
        position: relative;

        .control_info_list {
          display: inline-block;
          margin-top: 10px;
          min-width: 300px;

          .control_info_list_item {
            margin-bottom: 6px;
            opacity: 0.55;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #000000;
          }
        }
      }

      .control_info_main_data {
        display: inline-flex;
        width: 50%;
        justify-content: space-between;
        position: absolute;
        right: 0;

        .control_info_main_data_item {
          display: inline-block;
          width: 120px;
          text-align: center;

          .control_info_main_data_item_text {
            opacity: 0.55;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #000000;
            text-align: center;
          }

          .control_info_main_data_item_data {
            opacity: 0.9;
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #000000;
            text-align: center;
            padding: 10px 0;
          }
        }
      }
    }
  }

  .control_oper {
    padding: 30px 0 10px;
    opacity: 0.55;
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #000000;
  }
}

.guize-box {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 20px;

  .guize-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    line-height: 40px;
  }

  .guize-title {
    font-size: 16px;
    font-weight: bold;
    width: 100px;
    text-align: right;
  }

  .guize-info {
    width: calc(100% - 100px);
  }
}
</style>
<style lang="scss">
.zhibo-tab-pane {
  margin-top: 20px;
  margin-left: 10px;

  .el-tabs__nav-wrap::after {
    height: 0 !important;
  }

  .el-tabs__item {
    font-size: 20px;
  }
}

</style>
